<template>
	<view class="whole">
		<u-toast ref="uToast" />
		<view style="height: 176rpx;">
			<!-- <img src="/static/jiantous.png" alt="" style="width: 50rpx;height: 50rpx;margin: 100rpx 30rpx;" @click="returns()"> -->
			<!-- <image src="../../static/jiantous.png" alt="" style="width: 50rpx;height: 50rpx;margin: 100rpx 30rpx;" @click="returns()"> -->
				
		</view>
		<view class="login_top">
			<text style="color:#FFFFFF;font-size: 48rpx;font-weight: bold;">欢迎注册</text>
			<view class="login_top_text">
				<text style="color: #CCCCCC ;">已有账号</text>
				<span @click="toregister">，立即登录</span>
			</view>
		</view>
		
		<view class="password_top">
			<!-- <image src="../../static/index_logo.png" alt="" style="width: 230rpx;height: 68rpx;margin: 40rpx 40rpx"> -->

			<view class="password" style="display: flex;align-items: center;" >
				<text style="margin-left: 30rpx;color: #1FE7E7;font-size: 28rpx;"> +86</text>
				<view style="width: 2rpx;height: 30rpx;background-color: #262934;margin-left: 15rpx;"></view>
				<input type="number" placeholder="输入手机号" v-model="account" style="margin-left: 15rpx;font-size: 28rpx;flex: 2;" 
				  placeholder-style="font-size: 28rpx;" @input="graphicalcode">
				<!-- <input type="number" placeholder="输入手机号" v-model="account" style="margin-left: 30rpx;"> -->
			</view>
			
			<!-- <view   style="margin-top: 30rpx;display: flex;justify-content: space-between;align-items: center;" >
				<view class="passwords" style="flex:2" >
					<input type="text" placeholder="输入邀请码" v-model="invitation" style="margin-left: 30rpx;font-size: 28rpx;" placeholder-style="font-size: 28rpx;">
				</view>
				<canvas style="width:220rpx;height:90rpx;" canvas-id="canvas" @click="updateImageCode"></canvas>
			</view> -->
			
		<block>
			<view  style="display: flex;justify-content: space-between;align-items: center;margin: 30rpx 0 -30rpx;" >
				<view class="passwords" style="flex:2">
					<input type="text" placeholder="输入图形验证码" v-model="graphical" style="margin-left: 30rpx;font-size: 28rpx;flex: 2;" placeholder-style="font-size: 28rpx;">
				</view>
				<image src="../../static/graphical.png" mode="" v-if="graphicalimg==''" style="width:220rpx;height:80rpx;margin-right: 30rpx;margin-bottom: 30rpx;border-radius: 16rpx;"></image>
				<image :src="graphicalimg" mode="" style="width:220rpx;height:80rpx;margin-right: 30rpx;margin-bottom: 30rpx;border-radius: 16rpx;" @click="graphicalcode" v-else></image>
				<!-- <canvas style="width:220rpx;height:80rpx;" canvas-id="canvas" @click="updateImageCode"></canvas> -->
			</view>
			
		</block>
			
			<view class="passwords" style="margin-top: 30rpx;display: flex;justify-content: space-between;" >
				<!-- <input type="number" placeholder="验证码" v-model="code" style="margin-left: 30rpx;font-size: 28rpx;" placeholder-style="font-size: 28rpx;">
					<view style="width: 2rpx;background-color:#262934;height: 30rpx;margin-left: 100rpx;" placeholder-style="font-size: 28rpx;"></view>
				<view>
					<u-verification-code :seconds="seconds"   ref="uCode" @change="codeChange"></u-verification-code>
					<text @click="getCode" :style="timer?'margin-right: 60rpx;':''">{{tips}}</text>
				</view> -->
				<input type="number" placeholder="验证码" v-model="code" style="margin-left: 30rpx;font-size: 28rpx;flex: 2;"   placeholder-style="font-size: 28rpx;">
				<u-verification-code :seconds="seconds"   ref="uCode" @change="codeChange"></u-verification-code>
				<view style="display: flex;align-items: center;flex-wrap: nowrap ">
					<view style="width: 2rpx;height: 30rpx;background-color: #262934;margin-right: 15rpx;"></view>
					<text @click="getCode" style="margin-right: 30rpx;color: #1FE7E7;font-size: 28rpx;white-space: normal" >{{tips}}</text>
				</view>	
			</view>
			<view class="password" style="margin-top: 30rpx;">
				<input type="password" placeholder="设置登录密码" v-model="password" style="margin-left: 30rpx;font-size: 28rpx;" placeholder-style="font-size: 28rpx;">
			</view>
			<view class="password" style="margin-top: 30rpx;">
				<input type="password" placeholder="设置交易密码" v-model="operation_password" style="margin-left: 30rpx;font-size: 28rpx;" placeholder-style="font-size: 28rpx;">
			</view>
			<view class="password" style="margin-top: 30rpx;">
				<input type="text" placeholder="输入邀请码" v-model="invitation" style="margin-left: 30rpx;font-size: 28rpx;" placeholder-style="font-size: 28rpx;">
			</view>
			
			
			
			<view class="password_top_text" @click="agreement()">
				<image src="/static/circular.png" alt="" style="width: 26rpx;height: 26rpx;margin-right: 10rpx;" v-if="state">
				<image src="/static/Selected.png" alt="" style="width: 26rpx;height: 26rpx;margin-right: 10rpx;"  v-if="!state">
				<text>我已阅读并同意</text>
				<text style="color: #1FE7E7 ;" @click="getabout(1)">《用户协议》</text>
				<text>与</text>
				<text style="color: #1FE7E7 ;" @click="getabout(2)">《隐私协议》</text>
			</view>
		</view>
		
		<view class="button" @click="$u.debounce(verification, 1000, true)">
			<view style="margin-left: 50%;transform: translate(-50%);">
				立即注册
			</view>
		</view>

    <iframe :src="url" v-if="showstate" style="position:fixed;top:0;left:0;width:100vw;height:100vh;border:0"></iframe>
	</view>
</template>

<script>
import api from "../../api/api";
import { Mcaptcha } from "@/utils/mcaptcha";

export default {
  data() {
    return {
      showstate: false,
      url: "/hybrid/html/Webpage.html",
      account: "",
      code: "",
      password: "",
      operation_password: "",
      tips: "",
      invitation: "",
      // refCode: null,
      seconds: 60,
      timer: false,
      state: true,
      graphical: "",
      graphicalimg: "",
      // 阿里滑块验证码
      session_id: "",
      sig: "",
      token: "",
      pluswebview: null,
      mode: "allow",
    };
  },
  onReady() {
    this.mcaptcha = new Mcaptcha({
      el: "canvas",
      width: 80,
      height: 35,
      createCodeImg: "",
    });
  },
  onLoad(options) {
    if (uni.getStorageSync("platform") == "ios") {
      this.mode = "reject";
    }
    this.invitation = options.invitation_code || "";
  },
  onShow() {
    // this.graphicalcode()
  },
  onReady() {
    // #ifdef H5
    window.addEventListener("message", this.captchaListenerHandeler);
    // #endif
    // #ifdef APP-PLUS
    // plus.globalEvent.addEventListener('plusMessage', this.captchaListenerHandeler);
    // #endif
  },
  onUnload() {
    // #ifdef H5
    window.removeEventListener("message", this.captchaListenerHandeler);
    // #endif
    // #ifdef APP-PLUS
    // #endif
  },
  methods: {
    captchaListenerHandeler(e) {
      console.log(e, "eeeeeeeeeeeee");
      // #ifdef H5
      const result = e.data;
      // #endif
      // #ifdef APP-PLUS
      const result = e.data.args.data.arg;
      // #endif
      if (result && result.pagestate) {
        this.showstate = false;
        this.session_id = result.sessionId;
        this.sig = result.sig;
        this.token = result.token;
        this.Submit();
      }
    },
    appCreateVerify() {
      // 阿里云验证码 App打开本地verify页面（uni-app本地html存放在根目录/hybrid/html中）
      let wv = plus.webview.create("", "custom-webview", {
        "uni-app": "none",
        background: "transparent",
        webviewBGTransparent: true,
      });

      wv.loadURL("/hybrid/html/create_webview_sub.html");
      wv.overrideUrlLoading({ mode: "reject", match: ".*" }, (e) => {
        // console.log(e);
        this.token = e.url.split("push?token=")[1].split("&sig=")[0];
        this.sig = e.url.split("&sig=")[1].split("$sessionId=")[0];
        this.session_id = e.url.split("$sessionId=")[1];
        this.Submit();
      });
      const currentWebview = this.$scope.$getAppWebview();
      currentWebview.append(wv);
    },
    async graphicalcode() {
      if (!/^1[3456789]\d{9}$/.test(this.account)) {
        return;
      }
      let res = await api.graphicalcode({
        query: {
          key: this.account,
        },
        method: "get",
      });
      this.graphicalimg = res.data;
      console.log(res);
    },
    updateImageCode() {
      this.mcaptcha.refresh();
    },
    agreement() {
      this.state = !this.state;
    },
    codeChange(text) {
      this.tips = text;
    },
    async getCode() {
      if (!this.timer) {
        if (this.account == "") {
          this.$refs.uToast.show({
            title: "请填写手机号",
          });
          return;
        }
        if (this.graphical == "") {
          this.$refs.uToast.show({
            title: "请填写图形验证码",
          });
          return;
        }
        let res = await api.send_code_sms({
          query: {
            type: 2,
            mobile_phone: this.account,
            img_code: this.graphical,
          },
          method: "post",
        });
        if (res.code == 0) {
          this.$refs.uToast.show({
            title: res.msg,
            type: "success",
          });
        } else {
          this.graphicalcode();
          this.$refs.uToast.show({
            title: res.msg,
            type: "error",
          });
          return;
        }
        this.timer = true;
        this.tips = this.seconds;
        var time = setInterval(() => {
          this.tips--;
          if (this.tips <= 0) {
            clearInterval(time);
            this.tips = "重新获取";
            this.timer = false;
          }
        }, 1000);
      } else {
        this.$refs.uToast.show({
          title: "已发送短信",
          // 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
          // type: 'success',
          // 如果不需要图标，请设置为false
          // icon: false
        });
      }
    },
    async Submit() {
      let res = await api.register({
        query: {
          type: 2,
          code: this.code,
          account: this.account,
          password: this.password,
          operation_password: this.operation_password,
          invitation_code: this.invitation,
          session_id: this.session_id,
          sig: this.sig,
          token: this.token,
        },
        method: "post",
        loading: "加载中",
      });
      console.log(res, "111111--------------------");
      if (res.code == -101) {
        // #ifdef APP-PLUS
        this.appCreateVerify();
        // #endif
        // #ifdef H5
        this.showstate = true;
        // #endif
        return;
      }
      if (res.code == 0) {
        uni.setStorageSync("token", res.data);
        this.$refs.uToast.show({
          title: "登录成功",
          type: "success",
        });
        setTimeout(() => {
          if (uni.getStorageSync("route")) {
            uni.navigateBack({
              delta: 1,
            });
            uni.removeStorageSync("route");
            return;
          }
          uni.switchTab({
            url: "/pages/index/index",
          });
        }, 500);

        let resa = await api.info({});
        uni.setStorageSync("userInfo", resa.data);
      } else {
        this.$refs.uToast.show({
          title: res.msg,
          type: "error",
        });
      }
    },
    toregister() {
      // uni.navigateTo({
      //   url: "../signin/signin",
      // });
      uni.redirectTo({
        url: "../signin/signin",
      });
    },
    verification() {
      if (this.account == "") {
        this.$refs.uToast.show({
          title: "请填写手机号",
        });
        return;
      }
      if (!/^1[3456789]\d{9}$/.test(this.account)) {
        this.$refs.uToast.show({
          title: "请填写正确手机号",
        });
        return;
      }
      if (this.code == "") {
        this.$refs.uToast.show({
          title: "请填写验证码",
        });
        return;
      }
      if (this.password == "") {
        this.$refs.uToast.show({
          title: "请填写密码",
        });
        return;
      }
      if (this.password.length < 6 || this.password.length > 16) {
        this.$refs.uToast.show({
          title: "密码需要6-16位",
        });
        return;
      }
      if (this.operation_password == "") {
        this.$refs.uToast.show({
          title: "请填写交易密码",
        });
        return;
      }
      if (this.operation_password.length != 6) {
        this.$refs.uToast.show({
          title: "请输入6位交易密码",
        });
        return;
      }
      if (this.state) {
        this.$refs.uToast.show({
          title: "请先阅读协议",
        });
        return;
      }

      this.Submit();
    },
    returns() {
      uni.navigateBack({
        delta: 1, //返回层数，2则上上页
      });
    },
    async getabout(index) {
      let agreement = "user_agreement";
      if (index == 2) {
        agreement = "privacy_agreement";
        uni.navigateTo({
          url: `../privacy/privacy?key=${agreement}`,
        });
      } else {
        uni.navigateTo({
          url: `../agreement/agreement?key=${agreement}`,
        });
      }
    },
  },
};
</script>

<style lang="scss" scope>
@import "../../style/yuanchuang.scss";
.whole {
  background-image: url("/static/background_login.png");
  /* background-image: url('http://img.senbiaojita.cn/background_login.png'); */
  background-repeat: no-repeat;
  /* background-position: center; */
  background-attachment: fixed;
  /* background-size: cover; */
  background-size: 100%;

  /* -webkit-background-size: cover;
		 -moz-background-size: cover;
		 -o-background-size: cover; */

  width: 100%;
  height: 100%;
  min-height: 100vh;
  background-color: $bg-color1;
}
.login_top {
  display: flex;
  flex-direction: column;
  padding: 20rpx 40rpx;
}
/* span:first-child
	{
	    color:#FFFFFF;
		 font-size: 48rpx;
		 font-weight: bold;
	} */
.login_top_text {
  font-size: 28rpx;
  color: $text-color3;
  margin-top: 20rpx;
}
.password_top {
  border: 2rpx solid transparent;
  // margin: 0 30rpx;
  margin: 0 10rpx;
  background-color: transparent;
  border-radius: 25rpx;
  position: relative;
  top: 40rpx;
  font-size: 28rpx;
}
.passwords {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  margin: -10rpx 30rpx 20rpx;
  min-height: 80rpx;
  border: 2rpx solid #262934;
  border-radius: 4rpx;
  flex-wrap: nowrap;
  white-space: normal;
  background: $bg-color4;
}
.password {
  color: #ffffff;
  margin: -10rpx 30rpx 20rpx;
  /* min-height: 80rpx; */
  padding: 20rpx 0;
  border: 2rpx solid #262934;
  border-radius: 4rpx;
  background: $bg-color4;
}
.password_center {
  position: relative;
  top: 50rpx;
  color: #999999;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 30rpx;
  font-size: 28rpx;
}
.password_top_text {
  color: #999999;
  margin: 40rpx 30rpx;
  display: flex;
  align-items: center;
  font-size: 24rpx;
}
.button {
  position: relative;
  top: 60rpx;
  margin: 60rpx 40rpx;
  height: 90rpx;
  color: $text-color4;
  background: $button;
  background-repeat: no-repeat;
  background-size: 100%;
  text-align: center;
  line-height: 90rpx;
  font-size: 32rpx;
  border-radius: 16rpx;
}
</style>
